<template>
    <!-- 类静态绑定 -->
    <div class="chang">长江二桥</div>
    <!-- 动态样式绑定 -->
    <div :class="jiang">长江二桥</div>
    <div :class="{jiang:c}" @click="c = !c">长江二桥</div>
    <!-- style静态绑定 -->
    <div style="color: green">拾涯</div>
    <div :style="styleObj">拾涯</div>
    <button @click="setStyle">拾涯</button>
</template>

<script setup>
import { ref } from 'vue'
const jiang = ref('b')
const c = ref('ture')

const styleObj = ref({ color: 'blue'})
const setStyle = () => {
    styleObj.value.color = 'black'
}
</script>

<style scoped>
.chang {
    color: red;
}
.b {
    color: orange;
}
.jiang {
    color: yellow;
}
</style>